<template>
    <div>
        <select>
            <option value="">请选择</option>
            <option :value="item.code" v-for="item in provinces" :key="item.name">{{item.name  }}</option>
        </select>



        <table class="table table-bordered" style="background-color: aliceblue;">
            <thead>
                <tr style="background-color: aqua;">
                    <td>name</td>
                    <td>age</td>
                    <td>gender</td>
                    <td>hometown</td>
                    <td>photo</td>
                    <td>birthday</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender ? "男" : "女" }}</td>
                    <td>{{ item.hometown }}</td>
                    <td>
                        <img :src="item.photo" width="100" height="100">
                    </td>
                    <td>{{ moment(item.birthday).format("YYYY-MM-DD hh:mm:ss") }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { ref, reactive } from 'vue';

import moment from 'moment';
import { idText } from 'typescript';

let data = ref([
    {
        name: "张三",
        age: 16,
        gender: 0,
        hometown: "广东省",
        photo: 'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2004-09-20T11:32:09.244927'
    },
    {
        name: "李四",
        age: 17,
        gender: 1,
        hometown: "河北省",
        photo: "https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg",
        birthday: '2004-10-22T11:32:09.244927'
    },
    {
        name: "王五",
        age: 18,
        gender: 1,
        hometown: "福建省",
        photo: 'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2005-09-25T11:32:09.244927'
    },
    {
        name: "马六",
        age: 19,
        gender: 0,
        hometown: "河南省",
        photo: 'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2006-01-25T11:32:09.244927'
    },
])


let provinces = ref([
    { name: "北京市", code: '110000' },
    { name: '天津市', code: '120000' },
    { name: '河北省', code: '130000' },
    { name: '山西省', code: '140000' },
    { name: '内蒙古自治区', code: '150000' },
    { name: '辽宁省', code: '210000' },
    { name: '吉林省', code: '220000' },
    { name: '黑龙江省', code: '230000' },
    { name: '上海市', code: '310000' },
    { name: '江苏省', code: '320000' },
    { name: '浙江省', code: '330000' },
    { name: '安徽省', code: '340000' },
    { name: '福建省', code: '350000' },
    { name: '江西省', code: '360000' },
    { name: '山东省', code: '370000' },
])




</script>

<style scoped></style>
